<template>
    <view class="note-detail-container">
        <web-view :src="gzhUrl" v-if="gzhUrl"></web-view>
        <view class="content-wrapper" v-else>
            <!-- 顶部标题区域 -->
            <view class="page-header">
                <view class="header-title">{{ noteDetail.title }}</view>
                <view class="header-info">
                    <text class="header-date">{{ formatDate(noteDetail.createTime) }}</text>
                </view>
            </view>
            
            <!-- 内容区域 -->
            <view class="content-section">
                <!-- 视频或图片 -->
                <view class="media-container" v-if="noteDetail.mainImg">
                    <video 
                        class="media-video" 
                        :src="globalData.OSS_URL + noteDetail.mainImg" 
                        controls 
                        page-gesture 
                        v-if="type === 'mp4'"
                    ></video>
                    <image 
                        class="media-image" 
                        :src="globalData.OSS_URL + noteDetail.mainImg" 
                        mode="widthFix" 
                        v-else 
                    />
                </view>
                
                <!-- 详情内容 -->
                <view class="detail-container">
                    <view class="detail-text">{{ noteDetail.detail }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
    import api from '@/utils/api.js';
    import { ref, reactive } from 'vue';
    import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
    import {
		globalData
	} from '@/utils/util';
    
    const articleId = ref('');
    let noteDetail = reactive({});
    let type = ref('');
    let gzhUrl = ref('');
    
    const getNoteDetail = async () => {
        const res = await api.articleDetail({articleId: articleId.value});
        if(res.data.gzhUrl) {
            gzhUrl.value = res.data.gzhUrl;
        } else {
            type.value = res.data.mainImg.split('.')[1];
            noteDetail = Object.assign(noteDetail, res.data);
        }
    };
    
    // 格式化日期函数
    const formatDate = (timestamp) => {
        if (!timestamp) return '';
        
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        
        return `${year}-${month}-${day}`;
    };
    
    onLoad((options) => {
        articleId.value = options.articleId;
        getNoteDetail();
    });

    // 分享给朋友
    onShareAppMessage(() => {
      return {
        title: noteDetail.title || '分享一个页面',
        path: `/pages/noteDetail/noteDetail?articleId=${articleId.value}`
      };
    });

    // 分享到朋友圈
    onShareTimeline(() => {
      return {
        title: noteDetail.title || '分享一个页面',
        query: `articleId=${articleId.value}` // 如果有参数可以带上
      };
    });
</script>

<style lang="scss" scoped>
    .note-detail-container {
        background-color: #f6f8fa;
        min-height: 100vh;
        padding-bottom: 40rpx;
    }
    
    .content-wrapper {
        width: 100%;
    }
    
    .page-header {
        background-color: #2cbaff;
        padding: 40rpx 40rpx 60rpx;
        color: #fff;
    }
    
    .header-title {
        font-size: 36rpx;
        font-weight: bold;
        line-height: 1.4;
        margin-bottom: 20rpx;
    }
    
    .header-info {
        display: flex;
        align-items: center;
        opacity: 0.9;
    }
    
    .header-date {
        font-size: 24rpx;
    }
    
    .content-section {
        width: 92%;
        margin: -30rpx auto 0;
        position: relative;
    }
    
    .media-container {
        width: 100%;
        margin-bottom: 30rpx;
        border-radius: 16rpx;
        overflow: hidden;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }
    
    .media-video,
    .media-image {
        width: 100%;
        display: block;
    }
    
    .detail-container {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 40rpx 30rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    }
    
    .detail-text {
        font-size: 30rpx;
        line-height: 1.8;
        color: #333;
        text-indent: 2em;
        text-align: justify;
    }
</style>